<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title></title>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
		$(function(){
			var currentTime = new Date();
			var month = currentTime.getMonth() + 1;
			var day = currentTime.getDate();
			var year = currentTime.getFullYear() + 543;
			var dhtml = new DHTML();
			var result = true;
			var allocate = "";
			var targetId = "";
			var count = $("#count").val();
			if (count == "" || count == null){
				count = 0;
			}
	        //thaiDatepicker("expenseDate","#","1"); 
	        //[1, 1, 2013], [2, 25, 2013], [4, 1, 2013], [4, 08, 2013], [4, 15, 2013], [4, 16, 2013], [5, 1, 2013], [5, 6, 2013], 

			
	        
			function nonWorkingDates(date){
				var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
				//var closedDates = [['5', '24', '2013'], ['7', '1', '2013'], ['7', '22', ''], ['8', '12', ''], ['10', '23', '2013'], ['12', '5', '2013'], ['12', '10', '2013'], ['12', '31', '2013']];
				var closedDates = ${strArrHoliday != null && strArrHoliday != '' ? strArrHoliday : '""'};
				var closedDays = [[Sunday], [Saturday]];
				for (var i = 0; i < closedDays.length; i++) {
					if (day == closedDays[i][0]) {
						return [false];
					}
				}
				for (i = 0; i < closedDates.length; i++) {
					if (closedDates[i][2] == "") {
						if (date.getMonth() == closedDates[i][0] - 1 && date.getDate() == closedDates[i][1]) {
								return [false];
							}
					} else {
						if (date.getMonth() == closedDates[i][0] - 1 && date.getDate() == closedDates[i][1] && date.getFullYear() == closedDates[i][2]) {
								return [false];
							}
					}
				}
				return [true];
			}
	        var today = new Date();
			var tomorrow = new Date();
			tomorrow.setDate(today.getDate()+1);
			$("#expenseDate").datepicker({
				dateFormat : 'dd/mm/yy',
				showOn: 'button',
				buttonImage: 'images/calendar_full.png',
				buttonImageOnly: true,
				dayNamesMin: ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส'], 
				monthNamesShort: ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'],
				changeMonth: true,
				changeYear: true ,
				isBuddhist: true ,
				beforeShowDay: nonWorkingDates,
				minDate: tomorrow
			});
	        $("#allocateDisplay").combobox();
	        $("#vanderI").combobox();
	        
			$("#expenseDate").blur(function(){
				if($("#expenseDate").val() != null && $("#expenseDate").val() != "" ){
					result = diffDate($("#expenseDate").val(),day+"/"+month+"/"+year,"/");
					if (result == true){
						alert("กรุณาเลือกวันที่มากกว่าวันที่ : "+$("#date").val());
						$("#expenseDate").val("");
					}
				}
			});
			$("#btnConfirm").button({
	            icons: {
	                primary: "ui-icon-circle-check"
	            }
			}).click(function(){
	        	dateFormat(document.getElementById("expenseDate"));
				if($("#job").val()=="save" || $("#job").val()=="upload"){
					if($("#job").val()=="save" && validateEmpty()){
						if(confirm('คุณต้องการยืนยันการส่งอนุมัติ?')==true){
							$("#job").val("confirm");
							$("#saveForm").removeAttr("enctype");
							enableField(["budgetYear"]);
							disableField(["btnSave","btnConfirm"]);
							$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
							$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
			        		$("#job").val("confirm");
							$("#saveForm").submit();
						}
					}else if ($("#job").val()=="upload" && validateEmptyById(["$budgetYear","#btnFile","@btn"])){
						if(confirm('คุณต้องการยืนยันการส่งอนุมัติ?')==true){
							$("#job").val("confirmUpload");
							enableField(["budgetYear"]);
							disableField(["btnSave","btnConfirm"]);
							$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
							$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
							$("#saveForm").submit();
						}
					}
				}else{
					if(confirm('คุณต้องการยืนยันการส่งอนุมัติ?')==true){
						$("#saveForm").removeAttr("enctype");
						enableField(["budgetYear"]);
						$("#job").val("confirm");
						disableField(["btnSave","btnConfirm"]);
						$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
						$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
						$("#saveForm").submit();
					}
				}
			});
			$("#btnSave").button({
	            icons: {
	                primary: "ui-icon-disk"
	            }
			}).click(function(){
	        	dateFormat(document.getElementById("expenseDate"));
				if ($("#isUpload").val()=="N"){
					$("#saveForm").removeAttr("enctype");
				}
				if($("#job").val()=="save" || $("#job").val()=="upload"){
					if($("#job").val()=="save" && validateEmpty()){
						enableField(["budgetYear"]);
						disableField(["btnSave","btnConfirm"]);
						$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
						$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
						$("#saveForm").submit();
					}else if ($("#job").val()=="upload" && validateEmptyById(["$budgetYear","#btnFile","@btn"])){
						enableField(["budgetYear"]);
						disableField(["btnSave","btnConfirm"]);
						$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
						$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
						$("#saveForm").submit();
					}
				}else{
					enableField(["budgetYear"]);
					disableField(["btnSave","btnConfirm"]);
					$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
					$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
					$("#saveForm").submit();
				}
			});
			$("[name=btEdit]").button({
	            icons: {
	                primary: "ui-icon-pencil"
	            },
	            text : false
			});
			
			$("[name=btnDel]").button({
	            icons: {
	                primary: "ui-icon-closethick"
	            },
	            text : false
			});
			
			$("#btnUpdate").button({
	            icons: {
	                primary: "ui-icon-pencil"
	            }
			}).click(function() {
				var num;
				if ($("#job").val() != "edit") {
					num = targetId.split("_")[1];
				} else {
					num = $("#targetId").val();
				}
				document.getElementById("spanRefNo"+num).innerHTML = $("#refNoDisplay").val();
				document.getElementById("refNo"+num).value = $("#refNoDisplay").val();
				allocate = $("#allocateDisplay option:selected").text().split("-");
				var allocateSub = allocate[1];
				if(allocate[1].length > 20){
					allocateSub = allocate[1].substring(0,20)+"...";
				}
				document.getElementById("td_allocate"+num).title = allocate[1];
				if ($("#job").val() == "edit") {
					document.getElementById("td_allocate"+num).innerHTML = allocateSub;
					document.getElementById("allocateName"+num).value = allocate[1];
				} else {
					document.getElementById("allocate"+num).value = allocateSub;
				}
				document.getElementById("allocateCode"+num).value = $("#allocateDisplay").val();

				var vanderSub = "";
				var accountNo = "";
				var strSplit = "";
				if($("#radioVenderC").is(":checked")){
					strSplit = $("#vanderC option:selected").text().split("-");
					accountNo = strSplit[0];
					vanderSub = strSplit[1];
					if(strSplit[1].length > 20){
						vanderSub = strSplit[1].substring(0,20)+"...";
					}
					document.getElementById("spanVander"+num).innerHTML = accountNo+"-"+vanderSub;
					document.getElementById("spanVander"+num).title = accountNo+"-"+strSplit[1];
					document.getElementById("vander"+num).value = $("#vanderC").val();
				}else{
					strSplit = $("#vanderI option:selected").text().split("-");
					accountNo = strSplit[0];
					vanderSub = strSplit[1];
					if(strSplit[1].length > 20){
						vanderSub = strSplit[1].substring(0,20)+"...";
					}
					document.getElementById("spanVander"+num).innerHTML = accountNo+"-"+vanderSub;
					document.getElementById("spanVander"+num).title = accountNo+"-"+strSplit[1];
					document.getElementById("vander"+num).value = $("#vanderI").val();
				}
				
				document.getElementById("spanTransferAmount"+num).innerHTML = $("#transferAmountDisplay").val();
				document.getElementById("transferAmount"+num).value = $("#transferAmountDisplay").val();
				var categorySub = "";
				if ($("#categoryDisplay").val() != "") {
					categorySub = $("#categoryDisplay option:selected").text();
					if($("#categoryDisplay option:selected").text().length > 10){
						categorySub = $("#categoryDisplay option:selected").text().substring(0,10)+"...";
					}
				}
				document.getElementById("spanCategory"+num).innerHTML = categorySub;
				document.getElementById("spanCategory"+num).title = $("#categoryDisplay option:selected").text();
				document.getElementById("category"+num).value = $("#categoryDisplay").val();
				document.getElementById("spanResponsibleName"+num).innerHTML = $("#responsibleNameDisplay").val();
				document.getElementById("responsibleName"+num).value = $("#responsibleNameDisplay").val();
				document.getElementById("spanTransferDesc"+num).innerHTML = $("#transferDescDisplay").val();
				document.getElementById("transferDesc"+num).value = $("#transferDescDisplay").val();
				document.getElementById("checkDisplay"+num).disabled = false;
				if ($("#isBorrow").is(":checked")) {
					document.getElementById("checkDisplay"+num).checked = true;
					document.getElementById("isBorrow"+num).value = "Y";
				} else {
					document.getElementById("checkDisplay"+num).checked = false;
					document.getElementById("isBorrow"+num).value = "N";
				}
				document.getElementById("checkDisplay"+num).disabled = true;
				$("#btnAdd").css("display","");
				$("#btnUpdate").css("display","none");
				$("#btnUpdateCancel").css("display","none");
			});
			$("#btnUpdateCancel").button({
	            icons: {
	                primary: "ui-icon-close"
	            }
			}).click(function() {
				$("#btnAdd").css("display","");
				$("#btnUpdate").css("display","none");
				$("#btnUpdateCancel").css("display","none");
			});

			/* $("#btnTest").button({
	            icons: {
	                primary: "ui-icon-plusthick"
	            }
			}).click(function(){
				var count = $("#count").val();
				var vander;
				var vanderData;
				var allocateCode;
				var transferAmount;
				for (var i = 1 ; i <= count ; i++) {
					allocateCode = $("#allocateCode"+i).val(); 
					vander = $("#vander"+i).val(); 
					transferAmount = $("#transferAmount"+i).val();
					if ($("#radioVenderC").is(":checked")) {
						vanderData = $("#vanderC").val();
					} else {
						vanderData = $("#vanderI").val();
					}
					if ($("#allocateDisplay").val() == allocateCode && vanderData == vander && transferAmount == $("#transferAmountDisplay").val()) {
						alert("ขอ้มูลนี้เคยบันทึกแล้วกรุณาตรวจสอบ");
					}
				}
			}); */
			
			$("#btnAdd").button({
	            icons: {
	                primary: "ui-icon-plusthick"
	            }
			}).click(function() {
				// && checkDupicateData()
				if(validateEmpty()){
					$("#payDetail").css("display","");
					$("#payTableDetail").css("display","");
					//var tbody = dhtml.createElement(document.getElementById("payTableDetail"), ["tbody","id=list"+count+""], "");
					var tr = dhtml.createElement(document.getElementById("payTableDetail"), ["tr","id=tr_"+count], "");
					var td = dhtml.createElement(tr, ["td","align=center"], "");
					dhtml.createElement(td, ["span","id=spanRefNo"+count], $("#refNoDisplay").val());
					dhtml.createElement(td, ["input","type=hidden","name=refNo","id=refNo"+count,"value="+$("#refNoDisplay").val()], "");
					allocate = $("#allocateDisplay option:selected").text().split("-");
					var allocateSub = allocate[1];
					if(allocate[1].length > 20){
						allocateSub = allocate[1].substring(0,20)+"...";
					}
					var td1 = dhtml.createElement(tr, ["td","align=left","title="+allocate[1],"id=td_allocate"+count], "");
					dhtml.createElement(td1, ["input","type=text","id=allocate"+count,"value="+allocateSub,"readonly=readonly"],"");
					dhtml.createElement(td1, ["input","type=hidden","name=allocate","id=allocateCode"+count,"value="+$("#allocateDisplay").val()],"");
					dhtml.createElement(td1, ["input","type=hidden","id=allocateName"+count,"value="+allocate[1]],"");
					var textId = "#allocate"+count;
					$(textId).css("border","0");
					$(textId).css("background-color","#fff");
					var td2 = dhtml.createElement(tr, ["td","align=left"], "");
					var vanderSub = "";
					var accountNo = "";
					var strSplit = "";
					if($("#radioVenderC").is(":checked")){
						strSplit = $("#vanderC option:selected").text().split("-");
						accountNo = strSplit[0];
						vanderSub = strSplit[1];
						if(strSplit[1].length > 20){
							vanderSub = strSplit[1].substring(0,20)+"...";
						}
						dhtml.createElement(td2, ["span","id=spanVander"+count,"title="+$("#vanderC option:selected").text()], accountNo+"-"+vanderSub);
						dhtml.createElement(td2, ["input","type=hidden","name=vander","id=vander"+count,"value="+$("#vanderC").val()], "");
					}else{
						strSplit = $("#vanderI option:selected").text().split("-");
						accountNo = strSplit[0];
						vanderSub = strSplit[1];
						if(strSplit[1].length > 20){
							vanderSub = strSplit[1].substring(0,20)+"...";
						}
						dhtml.createElement(td2, ["span","id=spanVander"+count,"title="+$("#vanderI option:selected").text()], accountNo+"-"+vanderSub);
						dhtml.createElement(td2, ["input","type=hidden","name=vander","id=vander"+count,"value="+$("#vanderI").val()], "");
					}
					textId = "#vander"+count;
					$(textId).css("border","0");
					$(textId).css("background-color","#fff");
					
					var td3 = dhtml.createElement(tr, ["td","align=right"], "");
					dhtml.createElement(td3, ["span","id=spanTransferAmount"+count], $("#transferAmountDisplay").val());
					dhtml.createElement(td3, ["input","type=hidden","name=transferAmount","id=transferAmount"+count,"value="+$("#transferAmountDisplay").val()]);
					var categorySub = "";
					if ($("#categoryDisplay").val() != "") {
						categorySub = $("#categoryDisplay option:selected").text();
						if($("#categoryDisplay option:selected").text().length > 10){
							categorySub = $("#categoryDisplay option:selected").text().substring(0,10)+"...";
						}
					}
					var td4 = dhtml.createElement(tr, ["td","align=left"], "");
					dhtml.createElement(td4, ["span","id=spanCategory"+count,"title="+$("#categoryDisplay option:selected").text()], categorySub);
					dhtml.createElement(td4, ["input","type=hidden","name=category","id=category"+count,"value="+$("#categoryDisplay").val()], "");
					var td5 = dhtml.createElement(tr, ["td","align=left"], "");
					dhtml.createElement(td5, ["span","id=spanResponsibleName"+count], $("#responsibleNameDisplay").val());
					dhtml.createElement(td5, ["input","type=hidden","name=responsibleName","id=responsibleName"+count,"value="+$("#responsibleNameDisplay").val()], "");
					
					var td6 = dhtml.createElement(tr, ["td","align=left"], "");
					dhtml.createElement(td6, ["span","id=spanTransferDesc"+count], $("#transferDescDisplay").val());
					dhtml.createElement(td6, ["input","type=hidden","name=transferDesc","id=transferDesc"+count,"value="+$("#transferDescDisplay").val()], "");

					var td7 = dhtml.createElement(tr, ["td","align=center"], "");
					if ($("#isBorrow").is(":checked")) {
						dhtml.createElement(td7, ["input","type=checkbox","id=checkDisplay"+count,"disabled=disabled","checked=checked"], "");
						dhtml.createElement(td7, ["input","type=hidden","name=isBorrow","id=isBorrow"+count,"value=Y"], "");
					} else {
						dhtml.createElement(td7, ["input","type=checkbox","id=checkDisplay"+count,"disabled=disabled"], "");
						dhtml.createElement(td7, ["input","type=hidden","name=isBorrow","id=isBorrow"+count,"value=N"], "");
					}

					var td8 = dhtml.createElement(tr, ["td","align=center"], "");
					var editTR = dhtml.createElement(td8, ["a","id=btnEdit"+count+"","name=btnEdit","class=acc67-button"], "");
					var btnEdit = "#btnEdit"+count;
					$(btnEdit).button({
			            icons: {
			                primary: "ui-icon-pencil"
			            },
			            text : false
					});
					editTR.onclick = function () {
						targetId = tr.id;
						$("#btnAdd").css("display","none");
						$("#btnUpdate").css("display","");
						$("#btnUpdateCancel").css("display","");
						var num = targetId.split("_")[1];
						var venderCode = document.getElementById("vander"+num).value;
						$("#refNoDisplay").val(document.getElementById("refNo"+num).value);
						$('#allocateDisplaySpan input').val(document.getElementById("allocateCode"+num).value + " - " + document.getElementById("allocateName"+num).value);
						
						$.ajax({
							type: "post",
							url: "${pageContext.request.contextPath}/acc67",
							dataType: "json",
							cache: false,
							data: {
								app: "ajax",
								job: "getProvinceIdByVenderCode",
								venderCode : venderCode
							},
							success: function(data) {
								if(data.length>0){
									if (data[0].provinceId == $("#provinceId").val()) {
										document.getElementById("radioVenderI").checked = true;
										if (data[0].venderAccount != null && data[0].venderAccount != "") {
											$('#vanderISpan input').val(data[0].venderAccount + " - " + data[0].venderName);
										} else {
											$('#vanderISpan input').val(data[0].venderName);
										}
										$.ajax({
											type: "post",
											url: "${pageContext.request.contextPath}/acc67",
											dataType: "json",
											cache: false,
											data: {
												app: "ajax",
												job: "getVenderByProvinceId",
												provinceId : $("#provinceId").val(),
												venderType : "T"
											},
											success: function(data) {
												if(data.length>0){
													for(var i=0;i<data.length;i++){
														if (data[i].code == venderCode) {
															dhtml.createElement(document.getElementById("vanderI"), ["option","value="+data[i].code,"selected=selected"],data[i].venderAccount + "-" +data[i].name);
														} else {
															dhtml.createElement(document.getElementById("vanderI"), ["option","value="+data[i].code],data[i].venderAccount + "-" +data[i].name);
														}
													}
												}
											}
										});
										
										$("#vanderC").attr('disabled',true);
										$("#vanderCSpan input").css('display','none');
										$("#vanderCSpan button").css('display','none');
										$("#vanderCSpan a").css('display','none');
										$('#vanderC')
											.find('option')
										    .remove()
										    .end()
										    .append('<option value=""></option>')
										    .val('')
										;
										document.getElementById("$vanderI").disabled = false;
										document.getElementById("$vanderC").disabled = true;
										document.getElementById("$provinceSelect").disabled = true;
										document.getElementById("provinceSelect").disabled = true;
										document.getElementById("provinceSelect").value = "";
										document.getElementById("$vanderI").style.display="";
										document.getElementById("$vanderC").style.display="none";
										document.getElementById("vanderC").style.display="none";
									} else {
										document.getElementById("radioVenderC").checked = true;
										$('#vanderI')
											.find('option')
										    .remove()
										    .end()
										    .append('<option value=""></option>')
										    .val('')
										;
										$("#vanderI").attr('disabled',true);
										$('#vanderISpan input').val("");
									    $("#vanderISpan input").attr('disabled',true);
									    $("#vanderISpan button").attr('disabled',true);
									    $("#vanderISpan a").attr('disabled',true);
										document.getElementById("$vanderI").style.display="none";
										document.getElementById("$vanderI").disabled = true;
										
										$("#provinceSelect").removeAttr("disabled");
										document.getElementById("provinceSelect").value = data[0].provinceId;
										document.getElementById("$vanderC").style.display="";
										$("#vanderCSpan input").css('display','');
										$("#vanderCSpan button").css('display','');
										$("#vanderCSpan a").css('display','');
										$.ajax({
											type: "post",
											url: "${pageContext.request.contextPath}/acc67",
											dataType: "json",
											cache: false,
											data: {
												app: "ajax",
												job: "getVenderByProvinceId",
												provinceId : data[0].provinceId,
												venderType : "T"
											},
											success: function(data) {
												if(data.length>0){
													for(var i=0;i<data.length;i++){
														if (data[i].code == venderCode) {
															dhtml.createElement(document.getElementById("vanderC"), ["option","value="+data[i].code,"selected=selected"],data[i].venderAccount + "-" +data[i].name);
														} else {
															dhtml.createElement(document.getElementById("vanderC"), ["option","value="+data[i].code],data[i].venderAccount + "-" +data[i].name);
														}
													}
												}
											}
										});
										if (data[0].venderAccount != null && data[0].venderAccount != "") {
											$('#vanderCSpan input').val(data[0].venderAccount + " - " + data[0].venderName);
										} else {
											$('#vanderCSpan input').val(data[0].venderName);
										}
									}
								}
							}
						});
						$("#transferAmountDisplay").val(document.getElementById("transferAmount"+num).value);
						$("#categoryDisplay").val(document.getElementById("category"+num).value);
						$("#responsibleNameDisplay").val(document.getElementById("responsibleName"+num).value);
						$("#transferDescDisplay").val(document.getElementById("transferDesc"+num).value);
						var isBorrow = document.getElementById("isBorrow"+num).value;
						if (isBorrow == "Y") {
							document.getElementById("isBorrow").checked = true;
						} else {
							document.getElementById("isBorrow").checked = false;
						}
					}
					
					var td9 = dhtml.createElement(tr, ["td","align=center"], "");
					var delTR = dhtml.createElement(td9, ["a","id=btnDel"+count+"","name=btnDel","class=acc67-button"], "");
					var btnDel = "#btnDel"+count;
					$(btnDel).button({
			            icons: {
			                primary: "ui-icon-closethick"
			            },
			            text : false
					});
					delTR.onclick = function () {
						dhtml.removeElement(tr);
						count--;
						if(count == 0){
							$("#payDetail").css("display","none");
							$("#payTableDetail").css("display","none");
							disableField(["btnSave","btnConfirm"]);
							$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
							$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
						}
					}
					count++;
					$("#count").val(count);
					enableField(["btnSave","btnConfirm"]);
					$("#btnSave").removeClass("ui-button-disabled ui-state-disabled");
					$("#btnConfirm").removeClass("ui-button-disabled ui-state-disabled");
					}
				});
			/* 	if ($("#job").val() != "edit"){
					disableField(["btnSave","btnConfirm"]);
				} */
				$("#btnBack").button({
		            icons: {
		                primary: "ui-icon-arrowreturnthick-1-w"
		            }
				}).click(function(){
					$("#job").val("back");
					$("#saveForm").removeAttr("enctype");
					$("#saveForm").submit();
				});
				$("#radioVenderI").click(function(){
				    $("#vanderISpan input").removeAttr('disabled');
				    $("#vanderISpan button").removeAttr('disabled');
				    $("#vanderISpan a").removeAttr('disabled');
					$("#provinceSelect").attr("disabled","disabled");
					$("#provinceSelect").val("");
				    $("#vanderI").removeAttr('disabled');
					$("#vanderC").attr('disabled',true);
					$('#vanderISpan input').val("");
				    $("#vanderCSpan input").css('display','none');
				    $("#vanderCSpan button").css('display','none');
				    $("#vanderCSpan a").css('display','none');
					$('#vanderC')
						.find('option')
					    .remove()
					    .end()
					    .append('<option value=""></option>')
					    .val('')
					;
					document.getElementById("$vanderI").disabled = false;
					document.getElementById("$vanderC").disabled = true;
					document.getElementById("$provinceSelect").disabled = true;
					document.getElementById("provinceSelect").disabled = true;
					document.getElementById("$vanderI").style.display="";
					document.getElementById("$vanderC").style.display="none";
					document.getElementById("vanderC").style.display="none";
					document.getElementById("$provinceSelect").style.display="none";

					$('#vanderI')
					.find('option')
				    .remove()
				    .end()
				    .append('<option value=""></option>')
				    .val('');
					$('#vanderISpan input').val("");
					$.ajax({
						type: "post",
						url: "${pageContext.request.contextPath}/acc67",
						dataType: "json",
						cache: false,
						data: {
							app: "ajax",
							job: "getVenderByProvinceId",
							provinceId : $("#provinceId").val(),
							venderType : "T"
						},
						success: function(data) {
							if(data.length>0){
								for(var i=0;i<data.length;i++){
									dhtml.createElement(document.getElementById("vanderI"), ["option","value="+data[i].code],data[i].venderAccount + "-" +data[i].name);
								}
							}
						}
					});
					
				});
				$("#radioVenderC").click(function(){
					$("#provinceSelect").removeAttr("disabled");
					//$("#vanderC").css("display","");
					$("#vanderC").combobox();
					$('#vanderC')
						.find('option')
					    .remove()
					    .end()
					    .append('<option value=""></option>')
					    .val('');

				    $("#vanderC").removeAttr('disabled');
					$('#vanderI')
						.find('option')
					    .remove()
					    .end()
					    .append('<option value=""></option>')
					    .val('');
					$("#vanderI").attr('disabled',true);
					$('#vanderISpan input').val("");
				    $("#vanderISpan input").attr('disabled',true);
				    $("#vanderISpan button").attr('disabled',true);
				    $("#vanderISpan a").attr('disabled',true);

					$('#vanderCSpan input').val("");
				    $("#vanderCSpan input").css('display','');
				    $("#vanderCSpan button").css('display','');
				    $("#vanderCSpan a").css('display','');
				    
					document.getElementById("$vanderI").disabled = true;
					document.getElementById("$vanderC").disabled = false;
					document.getElementById("$provinceSelect").disabled = false;
					document.getElementById("$vanderI").style.display="none";
					document.getElementById("$vanderC").style.display="";
					document.getElementById("$provinceSelect").style.display="";
				});
				 $("#provinceSelect").change(function(){
					document.getElementById("vanderC").innerHTML = " ";
					$('#vanderC')
					.find('option')
				    .remove()
				    .end()
				    .append('<option value=""></option>')
				    .val('');
					$('#vanderCSpan input').val("");
					$.ajax({
						type: "post",
						url: "${pageContext.request.contextPath}/acc67",
						dataType: "json",
						cache: false,
						data: {
							app: "ajax",
							job: "getVenderByProvinceId",
							provinceId : $("#provinceSelect").val(),
							venderType : "T"
						},
						success: function(data) {
							if(data.length>0){
								for(var i=0;i<data.length;i++){
									dhtml.createElement(document.getElementById("vanderC"), ["option","value="+data[i].code],data[i].venderAccount + "-" +data[i].name);
								}
							}
						}
					});
				});
				$("#btnAddList").click(function(){
					if (validateEmptyById(["$provinceId","$budgetYear","#expenseDate"])) {
						var dhtml = new DHTML();
						disableField(["budgetYear"]);
						$("#transferList").css("display",""); 
						$("#fieldUpload").css("display","none"); 
						//alert($("#count").val());
						if ($("#count").val()!=0){
							$("#payDetail").css("display",""); 
						}
						$("#job").val("save");
						$("#isUpload").val("N");
					    $("#btnFile").attr('disabled',true);
						//disableField(["btnSave","btnConfirm"]);
					    $("#btnSave").attr('disabled',true);
					    $("#btnConfirm").attr('disabled',true);
						$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
						$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
						//Get vender By Province.
					} else {
						document.getElementById("btnAddList").checked = false;
					}
				});
				$("#btnUpload").click(function(){
					if (validateEmptyById(["$provinceId","$budgetYear","#expenseDate"])) {
						disableField(["budgetYear"]);
						$("#fieldUpload").css("display",""); 
						$("#transferList").css("display","none");
						$("#payDetail").css("display","none");
						$("#job").val("upload");
						$("#isUpload").val("Y");
					    $("#btnFile").attr('disabled',false);
						//enableField(["btnSave","btnConfirm"]);
					    $("#btnSave").attr('disabled',false);
					    $("#btnConfirm").attr('disabled',false);
						$("#btnSave").removeClass("ui-button-disabled ui-state-disabled");
						$("#btnConfirm").removeClass("ui-button-disabled ui-state-disabled");
					} else {
						document.getElementById("btnUpload").checked = false;
					}
				});
				if (count == 0){
					disableField(["btnSave","btnConfirm"]);
					$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
					$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
				}
				$("#btnDownload").button({
		            icons: {
		                primary: "ui-icon-arrowthickstop-1-s"
		            }
				}).click(function(){
					window.location='${pageContext.request.contextPath}/acc6?app=ACC60301&job=downloadTemplateTrans';
				});

				/* $("#provinceId").change(function(){
					$('#vanderI')
					.find('option')
				    .remove()
				    .end()
				    .append('<option value=""></option>')
				    .val('');
					$('#vanderISpan input').val("");
					$.ajax({
						type: "post",
						url: "${pageContext.request.contextPath}/acc67",
						dataType: "json",
						cache: false,
						data: {
							app: "ajax",
							job: "getVenderByProvinceId",
							provinceId : $("#provinceId").val(),
							venderType : "T"
						},
						success: function(data) {
							if(data.length>0){
								for(var i=0;i<data.length;i++){
									dhtml.createElement(document.getElementById("vanderI"), ["option","value="+data[i].code],data[i].name);
								}
							}
						}
					});
				}); */
		});
		
		
		function removeExpenseTransfer(transferSeq){
			/*var dhtml = new DHTML();
			if(confirm('คุณต้องการลบรายการรายจ่าย?')==true){
				var id = object.parentNode.parentNode.id;
				dhtml.removeElementById(id);
				$("#count").val($("#count").val()-1);
				if($("#count").val() == 0){
					disableField(["btnSave","btnConfirm"]);
					$("#payDetail").css("display","none");
					$("#payTableDetail").css("display","none");
					$("#btnSave").addClass("ui-button-disabled ui-state-disabled");
					$("#btnConfirm").addClass("ui-button-disabled ui-state-disabled");
				}
			}*/
			if(confirm('คุณต้องการลบรายการรายจ่าย?')==true){
				$("#saveForm").removeAttr("enctype");
				$("#transferSeq").val(transferSeq);
				$("#job").val("deleteTrn");
				$("#saveForm").submit();
			}
		}

		function checkNegative(transferAmountDisplayValue){					
			var transferAmount = document.getElementsByName("transferAmount");
			var allocate = document.getElementsByName("allocate");
			var sum = 0.00;
			if (transferAmount.length != null && transferAmount.length > 0){
				for(var i=0;i<transferAmount.length;i++){
					if(transferAmount[i].value != "" && allocate[i].value == $("#allocateDisplay").val()){
						sum = parseFloat(sum) + toFloat(transferAmount[i].value);
					}
				}
			}
			sum = parseFloat(sum) + toFloat(transferAmountDisplayValue);
			$.ajax({
				type: "post",
				url: "/provacc/acc67",
				dataType: "json",
				async: false,
			    cache: false,
				data: {
					app: "ajax",
					job: "getRemain",
					provinceId: $("#provinceId").val(),
					budgetYear: $("#budgetYear").val(),
					allocateCode: $("#allocateDisplay").val()
				},
				success: function(data) {
					if(data[0].result == "1"){
						for(var i=0;i<data.length;i++){
							if (toFloat(data[i].remain) < sum && data[i].negative == "0"){
								alert("ยอดคงเหลือ "+data[i].remain+" ติดลบไม่ได้");
								document.getElementById("transferAmountDisplay").value = "";
							}else if (toFloat(data[i].remain) < 0 && (data[i].negative == "1" || data[i].negative == "0")){
								alert("ยอดคงเหลือ "+data[i].remain+" ติดลบได้ 1 ครั้ง");
								document.getElementById("transferAmountDisplay").value = "";
							}
						}
					}else{
						return false;
					}
				}
			});
		}
		function getAllocateByBudgetYear(value){
			var dhtml = new DHTML();
			$('#allocateDisplaySpan input').val("");
			$('#allocateDisplay')
			.find('option')
		    .remove()
		    .end()
		    .append('<option value=""></option>')
		    .val('');
			if(value != ""){
				$.ajax({
					type: "post",
					url: "/provacc/acc67",
					dataType: "json",
					async: false,
				    cache: false,
					data: {
						app: "ajax",
						job: "getAllocate",
						budgetYear: value
					},
					success: function(data) {
						if(data.length > 0){
							for(var i=0;i<data.length;i++){
								dhtml.createElement(document.getElementById("allocateDisplay"), ["option","value="+data[i].code], data[i].code +" - "+ data[i].name);
							}
						}else{
							return false;
						}
					}
				});
			}
		}
		function editData(num){
			var dhtml = new DHTML();
			$("#btnAdd").css("display","none");
			$("#btnUpdate").css("display","");
			$("#btnUpdateCancel").css("display","");
			var venderCode = document.getElementById("vander"+num).value;
			$("#refNoDisplay").val(document.getElementById("refNo"+num).value);
			$('#allocateDisplaySpan input').val(document.getElementById("allocateCode"+num).value + " - " + document.getElementById("allocateName"+num).value);
			$('#allocateDisplay').val(document.getElementById("allocateCode"+num).value);
			$.ajax({
				type: "post",
				url: "${pageContext.request.contextPath}/acc67",
				dataType: "json",
				cache: false,
				data: {
					app: "ajax",
					job: "getProvinceIdByVenderCode",
					venderCode : venderCode
				},
				success: function(data) {
					if(data.length>0){
						if (data[0].provinceId == $("#provinceId").val()) {
							document.getElementById("radioVenderI").checked = true;
							if (data[0].venderAccount != null && data[0].venderAccount != "") {
								$('#vanderISpan input').val(data[0].venderAccount + " - " + data[0].venderName);
							} else {
								$('#vanderISpan input').val(data[0].venderName);
							}
							$.ajax({
								type: "post",
								url: "${pageContext.request.contextPath}/acc67",
								dataType: "json",
								cache: false,
								data: {
									app: "ajax",
									job: "getVenderByProvinceId",
									provinceId : $("#provinceId").val(),
									venderType : "T"
								},
								success: function(data) {
									if(data.length>0){
										for(var i=0;i<data.length;i++){
											if (data[i].code == venderCode) {
												dhtml.createElement(document.getElementById("vanderI"), ["option","value="+data[i].code,"selected=selected"],data[i].venderAccount + "-" +data[i].name);
											} else {
												dhtml.createElement(document.getElementById("vanderI"), ["option","value="+data[i].code],data[i].venderAccount + "-" +data[i].name);
											}
										}
									}
								}
							});
							
							$("#vanderC").attr('disabled',true);
							$("#vanderCSpan input").css('display','none');
							$("#vanderCSpan button").css('display','none');
							$("#vanderCSpan a").css('display','none');
							$('#vanderC')
								.find('option')
							    .remove()
							    .end()
							    .append('<option value=""></option>')
							    .val('')
							;
							document.getElementById("$vanderI").disabled = false;
							document.getElementById("$vanderC").disabled = true;
							document.getElementById("$provinceSelect").disabled = true;
							document.getElementById("provinceSelect").disabled = true;
							document.getElementById("provinceSelect").value = "";
							document.getElementById("$vanderI").style.display="";
							document.getElementById("$vanderC").style.display="none";
							document.getElementById("vanderC").style.display="none";
						} else {
							document.getElementById("radioVenderC").checked = true;
							$('#vanderI')
								.find('option')
							    .remove()
							    .end()
							    .append('<option value=""></option>')
							    .val('')
							;
							$("#vanderI").attr('disabled',true);
							$('#vanderISpan input').val("");
						    $("#vanderISpan input").attr('disabled',true);
						    $("#vanderISpan button").attr('disabled',true);
						    $("#vanderISpan a").attr('disabled',true);
							document.getElementById("$vanderI").style.display="none";
							document.getElementById("$vanderI").disabled = true;

							$("#provinceSelect").removeAttr("disabled");
							document.getElementById("provinceSelect").value = data[0].provinceId;
							document.getElementById("$vanderC").style.display = "";
							//document.getElementById("vanderC").style.display = "";
							document.getElementById("vanderC").disabled = false;
							$("#vanderCSpan input").css('display','');
							$("#vanderCSpan button").css('display','');
							$("#vanderCSpan a").css('display','');
							$("#vanderC").combobox();
							$.ajax({
								type: "post",
								url: "${pageContext.request.contextPath}/acc67",
								dataType: "json",
								cache: false,
								data: {
									app: "ajax",
									job: "getVenderByProvinceId",
									provinceId : data[0].provinceId,
									venderType : "T"
								},
								success: function(data) {
									if(data.length>0){
										for(var i=0;i<data.length;i++){
											if (data[i].code == venderCode) {
												dhtml.createElement(document.getElementById("vanderC"), ["option","value="+data[i].code,"selected=selected"],data[i].venderAccount + "-" +data[i].name);
											} else {
												dhtml.createElement(document.getElementById("vanderC"), ["option","value="+data[i].code],data[i].venderAccount + "-" +data[i].name);
											}
										}
									}
								}
							});
							if (data[0].venderAccount != null && data[0].venderAccount != "") {
								$('#vanderCSpan input').val(data[0].venderAccount + " - " + data[0].venderName);
							} else {
								$('#vanderCSpan input').val(data[0].venderName);
							}
						}
					}
				}
			});
			$("#transferAmountDisplay").val(document.getElementById("transferAmount"+num).value);
			$("#categoryDisplay").val(document.getElementById("category"+num).value);
			$("#responsibleNameDisplay").val(document.getElementById("responsibleName"+num).value);
			$("#transferDescDisplay").val(document.getElementById("transferDesc"+num).value);
			var isBorrow = document.getElementById("isBorrow"+num).value;
			if (isBorrow == "Y") {
				document.getElementById("isBorrow").checked = true;
			} else {
				document.getElementById("isBorrow").checked = false;
			}
			document.getElementById("targetId").value = num;
		}
		function checkDupicateData() {
			var count = document.getElementById("count").value;
			var job = document.getElementById("job").value;
			var vander;
			var vanderData;
			var allocateCode;
			var transferAmount;
			var result = true;
			var i = 0;
			if (job == "viewEdit") {
				i = 1;
			}
			for (i ; i <= count ; i++) {
				if (document.getElementById("vander"+i) != null) {
					vander = document.getElementById("vander"+i).value; 
					if (document.getElementById("radioVenderC").checked == true) {
						vanderData = document.getElementById("vanderC").value;
					} else {
						vanderData = document.getElementById("vanderI").value;
					}
					if (vanderData == vander) {
						alert("คู่สัญญานี้เคยบันทึกแล้วกรุณาตรวจสอบ");
						result = false;
					}
				}
			}
			return result;
		}
		</script>
	</head>
	<body>
		<c:set var="auth" value="${el:getMapValue(menuAuth, 'ACC60301')}"/>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="saveForm" id="saveForm" action="${pageContext.request.contextPath}/acc6" method="post" enctype="multipart/form-data">
		<input type="hidden" name="app" id="app" value="ACC60301"/>
		<input type="hidden" name="job" id="job" value="${job}"/>
		<input type="hidden" name="count" id="count" value="${count}"/>
		<input type="hidden" name="maxSeq" id="maxSeq" value="${maxSeq}"/>
		<input type="hidden" name="docNo" id="docNo" value="${docNo}"/>
		<input type="hidden" name="transferSeq" id="transferSeq" value="0"/>
		<input type="hidden" name="docNoForDel" id="docNoForDel" value=""/>
		<input type="hidden" name="isUpload" id="isUpload" value="N"/>
		<input type="hidden" name="targetId" id="targetId" value="0"/>
		<input type="hidden" name="mode" id="mode" value="${mode}"/>
		<table width="100%" class="ui-widget ui-widget-content" border="0">
			<tr>
				<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC60301}</b></th>
			</tr>
			<tr>
				<td class="bold" width="15%">เลขที่เอกสาร : </td>
				<td>${docNo}</td>
			</tr>
			<tr>
				<td class="bold">จังหวัด : </td>
				<td>
					<c:if test="${userInfo.areaLevel =='3'}">
						<c:forEach var="data" items="${userInfo.listUserProvice}">
							${data.provinceName}
							<input type="hidden" name="provinceId" id="provinceId" value="${data.provinceId}">
							<span id="$provinceId" style="display: none"></span>
						</c:forEach>
					</c:if>
					<c:if test="${userInfo.areaLevel=='1' || userInfo.areaLevel=='2'}">
						<c:if test="${job == 'save'}">
							<select name="provinceId" id="provinceId">
								<option value="">----- เลือก -----</option>
								<c:forEach var="data" items="${userInfo.listUserProvice}">
									<c:if test="${data.provinceId == provinceId}" var="provinceSeleted"/>
									<option value="${data.provinceId}" ${provinceSeleted?'selected':''}>${data.provinceName}</option>
								</c:forEach>
							</select>
							<span id="$provinceId" class="red">*</span>
						</c:if>
						<c:if test="${job == 'edit'}">
							${provinceName}
							<input type="hidden" name="provinceId" id="provinceId" value="${provinceId}">
						</c:if>
					</c:if>
				</td>
			</tr>
			<tr>
				<td class="bold">ปีงบประมาณ : </td>
				<td>
					<c:if test="${job == 'save'}">
					<select name="budgetYear" id="budgetYear" onchange="getAllocateByBudgetYear(this.value);">
						<option value="">----- เลือก -----</option>
						<c:forEach  var="data" items="${listBudgetYear}">
							<c:if test="${data.BUDGET_YEAR == expenseBean.budgetYear}" var="budgetYearSeleted"/>
							<option value="${data.BUDGET_YEAR}" ${budgetYearSeleted?'selected':''}>${data.BUDGET_YEAR}</option>
						</c:forEach>
					</select>
					<span id="$budgetYear" class="red">*</span>
					</c:if>
					<c:if test="${job == 'edit'}">
						${expenseBean.budgetYear}
						<input type="hidden" name="budgetYear" id="budgetYear" value="${expenseBean.budgetYear}">
					</c:if>
				</td>
			</tr>
			<tr>
				<td class="bold">วันที่ทำรายการ : </td>
				<td>
					<c:if test="${job == 'save'}">
						${now}
						<input type="hidden" name="date" id="date" value="${now}"/>
					</c:if>
					<c:if test="${job == 'edit'}">
						${el:dateTh(expenseBean.createdDate)}
						<input type="hidden" name="date" id="date" value="${el:dateTh(expenseBean.createdDate)}"/>
					</c:if>
				</td>
			</tr>
			<tr>
				<td class="bold">วันที่จ่าย : </td>
				<td>
					<input type="text" name="expenseDate" id="expenseDate" size="12" maxlength="10" readonly="readonly" value="${el:dateTh(expenseBean.expenseDate)}"/>
					<span id="#expenseDate" class="red">*</span>
				</td>
			</tr>
			<tr>
				<td class="bold">ชื่อการจ่าย : </td>
				<td>
					<input type="text" name="expenseSubject" id="expenseSubject" value="${expenseBean.expenseSubject}">
				</td>
			</tr>
<%-- 			<tr>
				<td class="bold">ชื่อผู้รับผิดชอบ : </td>
				<td>
					<input type="text" name="approveName" id="approveName" value="${expenseBean.responsibleName}"/>
				</td>
			</tr> --%>
			<tr>
				<td class="bold" valign="top">คำอธิบายการจ่าย : </td>
				<td>
					<textarea cols="25" rows="3" name="expenseDesc" id="expenseDesc">${expenseBean.expenseDesc}</textarea>
				</td>
			</tr>
			<c:if test="${job == 'save'}">
				<tr>
					<td class="bold"></td>
					<td>
						<input type="radio" name="btn" id="btnAddList" />เพิ่มรายการ
						</br>
						<input type="radio" name="btn" id="btnUpload" />upload excel
						<span id="@btn" class="red">*</span>
					</td>
				</tr>
			</c:if>
			<tr>
				<td colspan="2">
				<fieldset id="transferList" style="display: ${display};">
					<legend> เพิ่มการจ่ายโอน </legend>
					<table width="100%" class="ui-widget ui-widget-content" border="0">
						<tr>
							<td class="bold" width="18%">เอกสารอ้างอิง : </td>
							<td colspan="3">
								<input type="text" name="refNoDisplay" id="refNoDisplay" maxlength="50" value=""/>
								<span id="#refNoDisplay" class="red">*</span>
							</td>
						</tr>
						<tr>
							<td class="bold">กองทุนย่อยเฉพาะด้าน : </td>
							<td colspan="3">
								<span id="allocateDisplaySpan">
									<select name="allocateDisplay" id="allocateDisplay">
										<option value="">----- เลือก -----</option>
										<c:forEach items="${lsAllocate}" var="lsAllocateData">
											<option value="${lsAllocateData.ALLOCATE_CODE}">${lsAllocateData.ALLOCATE_CODE} - ${lsAllocateData.ALLOCATE_NAME}</option>
										</c:forEach>
									</select>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<span id="$allocateDisplay" class="red" style="position: absolute;">*</span>
								</span>
							</td>
						</tr>
						<tr>
							<td class="bold"> หน่วยบริการ/คู่สัญญา : </td>
							<td colspan="3">
								<input type="radio" name="radioVender" id="radioVenderI" value="I"/>ในจังหวัด &nbsp;:&nbsp;
								<span id="vanderISpan">
									<select name="vanderDisplay" id="vanderI">
										<option value="">----- เลือก -----</option>
										<%-- <c:forEach items="${listVender}" var="listVenderData">
											<option value="${listVenderData.venderCode}">${listVenderData.venderName}</option>
										</c:forEach> --%>
									</select>
								</span>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span id="$vanderI" class="red" style="position: absolute;">*</span>
							</td>
						</tr>
						<tr> 
							<td></td>
							<td colspan="3">
								<input type="radio" name="radioVender" id="radioVenderC" value="C"/>ข้ามจังหวัด
								<select name="provinceSelect" id="provinceSelect" disabled="disabled">
									<option value="">----- เลือก -----</option>
									<c:forEach items="${listProviceC}" var="listProviceCData">
										<option value="${listProviceCData.PROVINCE_ID}">${listProviceCData.PROVINCE_NAME}</option>
									</c:forEach>
								</select>
								<span id="$provinceSelect" class="red" style="display: none;" disabled="disabled">*</span>
								&nbsp;:&nbsp;
								<span id="vanderCSpan">
									<select name="vanderDisplay" id="vanderC" style="display: none;" disabled="disabled">
										<option value="">----- เลือก -----</option>
									</select>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span id="$vanderC" class="red" style="display: none;" disabled="disabled" style="position: absolute;">*</span>
								</span>
							</td>
						</tr>
						<tr>
							<td class="bold">จำนวนเงิน : </td>
							<td>
								<input type="text" name="transferAmountDisplay" id="transferAmountDisplay" onkeypress="return numberAndDot(event, false);" onblur="this.value = addCommas2D(this.value); checkNegative(this.value);"/>							
								<span id="#transferAmountDisplay" class="red">*</span>
							</td>
							<td class="bold">หมวดการจ่าย : </td>
							<td>
								<input type="checkbox" id="isBorrow"> เงินยืม
								<select name="categoryDisplay" id="categoryDisplay">
									<option value="">----- เลือก -----</option>
									<c:forEach items="${listCategory}" var="listCategoryData">
										<option value="${listCategoryData.categoryId}">${listCategoryData.categoryName}</option>
									</c:forEach>
								</select>
							</td>
						</tr>
						<tr valign="top">
							<td class="bold">ชื่อผู้รับผิดชอบ : </td>
							<td>
								<input type="text" name="responsibleNameDisplay" id="responsibleNameDisplay" value=""/>
							</td>
							<td class="bold">ชื่อโครงการ/คำอธิบาย : </td>
							<td>
								<textarea name="transferDescDisplay" id="transferDescDisplay" cols="30" rows="3"></textarea>
								<span id="#transferDescDisplay" class="red">*</span>
							</td>
						</tr>
						<tr>
							<td align="center" colspan="4">
								<button type="button" name="btnAdd" id="btnAdd" class="acc67-button">เพิ่มรายการ</button>
								<!-- <button type="button" name="btnTest" id="btnTest" class="acc67-button">Test</button> -->
								<button style="display: none;" type="button" name="btnUpdate" id="btnUpdate" class="acc67-button">แก้ไขรายการ</button>
								<button style="display: none;" type="button" name="btnUpdateCancel" id="btnUpdateCancel" class="acc67-button">ยกเลิกแก้ไขรายการ</button>
							</td>
						</tr>
					</table>
				</fieldset>
				</td>
			</tr>
			<tr>
				<td colspan="2">
				<fieldset id="payDetail" style="display: ${display};">
					<legend>รายละเอียดการจ่ายโอน</legend>
					<table width="100%" class="acc67-grid ui-widget ui-widget-content" id="payTableDetail">
						<tr>
							<th align="center" class="ui-state-default" width="7%">เอกสารอ้างอิง</th>
							<th align="center" class="ui-state-default" width="10%">กองทุนย่อยเฉพาะด้าน</th>
							<th align="center" class="ui-state-default" width="20%">เลขที่บัญชี - หน่วยบริการ/คู่สัญญา</th>
							<th align="center" class="ui-state-default" width="10%">จำนวนเงิน</th>
							<th align="center" class="ui-state-default" width="10%">หมวดการจ่าย</th>
							<th align="center" class="ui-state-default" width="10%">ชื่อผู้รับผิดชอบ</th> 
							<th align="center" class="ui-state-default">ชื่อโครงการ/คำอธิบาย</th>
							<th align="center" class="ui-state-default" width="5%">เงินยืม</th>
							<th align="center" class="ui-state-default" width="5%">แก้ไข</th>
							<th align="center" class="ui-state-default" width="5%">ลบ</th>
						</tr>
						<c:if test="${!empty listExpenseTransfer}">
							<c:forEach items="${listExpenseTransfer}" var="data" varStatus="x">
									<tr id="tr_tbody_${data.docNo}${data.transferSeq}">
										<td align="center">
											<span id="spanRefNo${x.count}">${data.refNo}</span>
											<input type="hidden" name="refNo" id="refNo${x.count}" value="${data.refNo}">
										</td>
										<td align="left">
											<span id="td_allocate${x.count}" title="${data.allocateName}">${data.allocateSub}</span>
											<input type="hidden" name="allocate" id="allocateCode${x.count}" value="${data.allocateCode}">	
											<input type="hidden" id="allocateName${x.count}" value="${data.allocateName}">	
										</td>
										<td align="left">
											<span id="spanVander${x.count}" title="${data.venderAccount} - ${data.venderName}">${data.venderAccount} - ${data.venderSub}</span>
											<input type="hidden" name="vander" id="vander${x.count}" value="${data.venderCode}">
										</td>
										<td align="right">
											<span id="spanTransferAmount${x.count}"><fmt:formatNumber pattern="#,##0.00" value="${data.transferAmount}" /></span>
											<input type="hidden" name="transferAmount" id="transferAmount${x.count}" value="<fmt:formatNumber pattern="#,##0.00" value="${data.transferAmount}" />">
										</td>
										<td align="left">
											<c:set value="${el:getMapValue(mapCat,data.categoryId)}" var="catName"/>
											<c:if test="${fn:length(catName) > 10}">
												<span title="${catName}" id="spanCategory${x.count}" >${fn:substring(catName,0,10)}...</span>
											</c:if>
											<c:if test="${fn:length(catName) <= 10}">
												<span title="${catName}" id="spanCategory${x.count}" >${catName}</span>
											</c:if>
											<input type="hidden" name="category" id="category${x.count}" value="${data.categoryId}">
										</td>
										<td>
											<span id="spanResponsibleName${x.count}">${data.responsibleName}</span>
											<input type="hidden" name="responsibleName" id="responsibleName${x.count}" value="${data.responsibleName}">
											</td>
										<td>
											<span id="spanTransferDesc${x.count}">${data.transferDesc}</span>
											<input type="hidden" name="transferDesc" id="transferDesc${x.count}" value="${data.transferDesc}">		
										</td>
										<td align="center">
											<input type="checkbox" ${data.isBorrow=='Y'?'checked':''} id="checkDisplay${x.count}" disabled="disabled"/>
											<input type="hidden" name="isBorrow" id="isBorrow${x.count}" value="${data.isBorrow}">
											<input type="hidden" name="transferSeq2" id="transferSeq${x.count}" value="${data.transferSeq}">	
											<input type="hidden" name="transactionTimestamp" id="transactionTimestamp${x.count}" value="${data.transactionTimestamp}">					
										</td>
										<td align="center"><button type="button" name="btEdit" id="btEdit" class="acc67-button" onclick="editData('${x.count}')"/></td>
										<td align="center"><button type="button" name="btnDel" id="btnDel" class="acc67-button" onclick="removeExpenseTransfer('${data.transferSeq}')"/></td>
									</tr>
							</c:forEach>
						</c:if>
						<tbody id="listData">
						</tbody>
					</table>
				</fieldset>
				</td>
			</tr>
			<tr>
				<td colspan="2">
				<fieldset id="fieldUpload" style="display: none;">
					<legend> Upload File</legend>
					<table width="100%" class="acc67-grid ui-widget ui-widget-content" id="payTableDetail">
						<tr>
							<td colspan="2">
								<button type="button" name="btnDownload" id="btnDownload" class="acc67-button">Download Template</button>
							</td>
						</tr>
						<tr>
							<td  class="bold" width="20%">นำเข้าจากไฟล์ : </td>
							<td>
								<input type="file" id="btnFile" name="xlsFile" disabled="disabled"/>
								<span id="#btnFile" class="red">*</span>
							</td>
						</tr>
					</table>
				</fieldset>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<c:if test="${fn:contains(auth, 'U') || fn:contains(auth, 'I')}">
						<button type="button" name="btnSave" id="btnSave" class="acc67-button">บันทึกข้อมูล</button>
						<button type="button" name="btnConfirm" id="btnConfirm" class="acc67-button">ส่งอนุมัติ</button>
					</c:if>
					<button type="button" name="btnBack" id="btnBack" class="acc67-button">ย้อนกลับ</button>
				</td>
			</tr>
		</table>
		</form>
	</body>
</html>